<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JACKPIRO</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- 顶部导航栏 -->
    <header>
        <div class="logo">
            <h1>JACKPIRO</h1>
        </div>
        <div class="header-right">
            <button class="login-btn" onclick="window.location.href='login.html'">注册</button>
            <button class="signup-btn" onclick="window.location.href='login.html'">登录</button>
        </div>
    </header>

    <!-- 左侧导航栏 -->
    <nav class="sidebar">
        <ul class="nav-links">
            <li class="active"><a href="#game">游戏</a></li>
            <li><a href="#software">软件</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#testimonial">贡献者</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <!-- 内容区域 -->
    <main>
        <!--大屏文字展示 -->
        <section id="hero">
            <div class="hero-content">
                <h1>令人‘吃鲸’<br>3D 游戏</h1>
                <p>
                    一个专注于3D游戏领域的官方网站，
                    <br>
                    致力于为广大玩家提供丰富多样的3D游戏下载资源。
                </p>
                <button class="download-btn">下载</button>
            </div>
            <div class="hero-image">
                <img src="images/img.png" alt="3D Game">
            </div>
        </section>

        <!-- 我的游戏 -->
        <section id="game" class="section">
            <h2 class="section-title mygametitle">我的游戏</h2>
            <div class="game-list">
                <div class="game-item">
                    <div class="game-image">
                        <img src="images/our-image1.jpg" alt="Angry Birds">
                    </div>
                    <div class="game-content">
                        <h3>愤怒的小鸟</h3>
                        <p>游戏讲述了一群小鸟为了夺回被邪恶绿皮猪偷走的鸟蛋，通过弹弓发射自身，利用不同的特殊技能攻击绿皮猪建造的堡垒的故事。<br/>
                            玩家需要控制弹弓，选择合适的小鸟并调整发射角度和力度，以击中目标并摧毁堡垒。<br/>
                            游戏中有多种小鸟，每种小鸟都有独特的技能和特点，如红色小鸟力量强大，蓝色小鸟可以分裂成三只小鸟，黄色小鸟能够加速冲刺等。
                        </p>
                        <button class="free-download">下载</button>
                    </div>
                </div>
                <div class="game-item">
                    <div class="game-image">
                        <img src="images/our-image2.jpg" alt="Sanke">
                    </div>
                    <div class="game-content">
                        <h3>贪吃蛇</h3>
                        <p>玩家操纵一个贪吃蛇，在一个空白区域内移动。
                            贪吃蛇由一块初始长度较短的身体组成，通过不断地吞食食物（通常是圆点或方块）来增长自己的长度。
                            游戏目标是尽量延长蛇身并避免碰到边界或自己的身体。<br/>
                            当玩家控制贪吃蛇向某个方向行进时，蛇会不停地前进直到撞墙或是撞到自己的身体为止。<br/>
                        </p>
                        <button class="free-download">下载</button>
                    </div>
                </div>
                <div class="game-item">
                    <div class="game-image">
                        <img src="images/our-image3.jpg" alt="Cricket">
                    </div>
                    <div class="game-content">
                        <h3>飞镖</h3>
                        <p>玩家需要在飞镖盘上关闭（或占领）所有有效分值区，并尽可能获得更高的分数。最终获胜者是关闭所有分区并且得分最高的玩家。<br/>
                            玩家必须命中某个区域3次才能视为“关闭”或“占领”该区域。<br/>例如，一镖三倍20就可以关闭20分区，而双倍20则不算，需要再命中一镖单倍20才可关闭。如果命中2次双倍20，则视为关闭20分区，并额外获得多出来的20分。
                        </p>
                        <button class="free-download">下载</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 软件-->
        <section id="software" class="section">
            <h2 class="section-title">软件</h2>
            <div class="software-container">
                    <div class="software-image">
                        <img src="images/soft.jpg" alt="Software">
                    </div>
                <div class="software-content">
                    <p>游戏软件公司是指专注于开发、发行和运营游戏软件的企业。
                        任天堂是日本一家全球知名的娱乐厂商，电子游戏业三巨头之一。任天堂以开发优秀的全年龄游戏为己任，始终坚持反对暴力和色情，保持着弥足珍贵的社会责任和企业操守。任天堂的游戏作品在全球范围内深受欢迎，其家用游戏机和掌上游戏机系列也取得了巨大的成功。
                        索尼互动娱乐（SIE）是日本索尼公司旗下的子公司，专注于游戏和娱乐业务。索尼互动娱乐在全球范围内拥有庞大的游戏发行网络，其PlayStation系列游戏机在全球范围内广受欢迎。索尼互动娱乐还通过PlayStation Network提供在线游戏服务，为玩家提供丰富的游戏内容和社交体验。
                    </p>
                </div>
            </div>
        </section>

        <!-- 关于我们 -->
        <section id="about" class="section">
            <h2 class="section-title">关于我们</h2>
            <div class="about-game">
                <div class="video-container">
                    <img src="images/about.jpg" alt="Game Preview">
                    <!-- <button class="play-btn">
                        <img src="icon-images/play.png" alt="Play">
                    </button> -->
                </div>
                <p class="about-text">
                    在电影和动画制作中，3D技术为观众带来了震撼的视觉效果和逼真的角色形象。
                    在游戏开发中，3D技术使得游戏场景更加真实、角色动作更加自然，为玩家提供了沉浸式的游戏体验。
                </p>
            </div>
        </section>

        <!-- 贡献者-->
        <section id="testimonial" class="section">
            <h2 class="section-title">贡献者</h2>
            <div class="testimonial-container">
                <div class="testimonial-slider">
                    <div class="testimonial-item">
                        <div class="testimonial-images">
                            <img src="images/avatar1.png" alt="Testimonial" class="side-image">
                            <img src="images/avatar2.png" alt="Testimonial" class="main-image">
                            <img src="images/avatar3.png" alt="Testimonial" class="side-image">
                        </div>
                        <h3>职能</h3>
                        <p>游戏运营与推广团队负责游戏的日常维护、更新、活动策划以及市场推广等工作。<br/>
                            他们通过不断优化游戏体验、推出吸引人的活动以及扩大游戏的知名度，
                            为游戏的长期发展和玩家社区的繁荣做出了重要贡献。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我们 -->
        <section id="contact" class="section">
            <h2 class="section-title">联系我们</h2>
            <div class="contact-form">
                <form>
                    <input type="text" name="name" placeholder="姓名" required>
                    <div class="form-row">
                        <input type="tel" name="phone" placeholder="电话">
                        <input type="email" name="email" placeholder="邮箱">
                    </div>
                    <textarea name="message" placeholder="其他信息" rows="6"></textarea>
                    <button class="send-btn">提交</button>
                </form>
            </div>
        </section>

        <!-- Footer -->
        <footer class="footer">
            <div class="newsletter">
                <h2>新闻通讯</h2>
                <div class="subscribe-form">
                    <input type="email" placeholder="进入你的邮箱">
                    <button type="submit" class="subscribe-btn">提交</button>
                </div>
            </div>

            <div class="footer-content">
                <div class="footer-links">
                    <div class="quick-links">
                        <h3>快速链接</h3>
                        <ul>
                            <li><a href="#game"><img src="images/3.png" class="location-icon"></img> 游戏</a></li>
                            <li><a href="#software"><img src="images/3.png" class="location-icon"></img> 软件</a></li>
                            <li><a href="#about"><img src="images/3.png" class="location-icon"></img> 关于我们</a></li>
                            <li><a href="#testimonial"><img src="images/3.png" class="location-icon"></img> 贡献者</a></li>
                            <li><a href="#contact"><img src="images/3.png" class="location-icon"></img> 联系我们</a></li>
                        </ul>
                    </div>

                    <div class="downloaded">
                        <h3>下载</h3>
                        <ul>
                            <li><a href="#"> <img src="images/3.png" class="location-icon"></img> Lorem Ipsum</a></li>
                            <li><a href="#"> <img src="images/3.png" class="location-icon"></img> Simply random</a></li>
                            <li><a href="#"> <img src="images/3.png" class="location-icon"></img> Roots in a</a></li>
                            <li><a href="#"> <img src="images/3.png" class="location-icon"></img> Piece</a></li>
                            <li><a href="#"> <img src="images/3.png" class="location-icon"></img> Classical</a></li>
                        </ul>
                    </div>

                    <div class="contact-info">
                        <h3>联系我们</h3>
                        <p><img src="icon/loc.png" class="loc-icon"></img> 伦敦英国</p>
                        <p><img src="icon/email.png" class="email-icon"></img>  demo@mail.com</p>
                        <p><img src="icon/call.png" class="call-icon"></img>  +12586954775</p>
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <p>© 2019 All Rights Reserved. 网页模板</p>
            </div>
        </footer>
    </main>

    <script src="js/main.js"></script>
</body>

</html>